@import '../../layouts/index.less';



.home {
    .tabs {
        .ant-form-item {
            flex: 1;
            max-width: 219px;

            .ant-form-item-explain-error {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            &:last-child {
                flex: 0;
            }

            .ant-input-number-group-wrapper,
            .ant-select {
                width: 100% !important;
                font-size: 13px;
            }
        }
    }



    // @media screen and (max-width: 1550px) {
    //     .home_layout_bg {
    //         background-size: cover !important;
    //         background-image: url('../../assets/home_bg_blue.png') !important;
    //         background-repeat: no-repeat;
    //         position: relative;

    //         .ant-form-item {

    //             max-width: 184px;
    //         }

    //         .layout_child {
    //             width: 1040px;

    //             .home_title_word {
    //                 font-size: 19px !important;
    //             }

    //             .ant-input-number-group-wrapper,
    //             .ant-select {

    //                 font-size: 13px;
    //             }

    //             .en_tabs .ant-tabs-tab {
    //                 font-size: 13px;
    //             }
    //         }

    //         &::after {
    //             content: "";
    //             position: absolute;
    //             left: 0;
    //             bottom: 100px;
    //             background-image: url('../../assets//home_bg_left.png') !important;
    //             width: 100px;
    //             height: 141px;
    //             transform: scale(1.8);
    //             background-size: cover;

    //         }

    //         &::before {
    //             content: "";
    //             position: absolute;
    //             right: 0;
    //             top: -50px;
    //             background-image: url('../../assets//home_bg_right.png') !important;
    //             width: 121px;
    //             height: 200px;
    //             transform: scale(2);
    //             background-size: cover;

    //         }

    //     }
    // }




    .home_text_transparent {

        /* 线性渐变从蓝色到红色 */
        background: linear-gradient(270deg, #E53125 13.6%, #EB5610 71.93%);
        /* 将文字与渐变背景对齐 */
        -webkit-background-clip: text;
        background-clip: text;
        /* 使用透明度为了实现渐变效果，而不是直接影响字体颜色 */
        color: transparent;

    }

    &_title {
        font-size: 50px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 3px;
    }

    &_top_swiper {


        // position: static !important;


        .slick-arrow {
            width: 50px;
            height: 50px;
        }

        .slick-prev {
            inset-inline-start: 23px
        }

        .slick-next {
            inset-inline-end: 23px
        }
    }

    &_content {
        padding-top: 75px;
        box-shadow: none !important;

        &_items {
            position: relative;

            &::after {
                position: absolute;
                content: "";
                width: 832px;
                height: 178px;
                z-index: 1;
                background-image: url('../../assets/home_line1.png');
                background-size: cover;
                top: 83px;
                left: 90px;
            }
        }

        &_item {
            width: 300px;
            text-align: center;
            position: relative;

            &_word {
                font-size: 20px;
                font-weight: 700;
                color: #000;
                line-height: 23px;
            }

            &_des {
                margin: 12px 0 3px;
                color: #666;
                line-height: 16px;
            }

            &_know {
                color: #0270df;
                line-height: 16px;
                cursor: pointer;

            }

        }

        &_top {
            background: #C3DDFF;
            border-radius: 18px;
            position: relative;
            overflow: hidden;

            &_title {
                font-size: 18px;
                color: #082674;
                font-weight: 600;
                padding-top: 25px;
            }
        }

        &_top0 {

            &::after {
                width: 300px;
                height: 300px;
                transform: rotate(-17deg);
                position: absolute;
                content: "";
                background: #034FE6;
                top: 122px;
                left: 73px;
                border-radius: 30px;
            }
        }

        &_top1 {
            &::after {
                width: 255px;
                height: 300px;
                transform: rotate(19deg);
                position: absolute;
                content: "";
                background: #034FE6;
                top: 118px;
                left: 44px;
                border-radius: 30px;
            }
        }

        &_top2 {
            &::after {
                width: 255px;
                height: 338px;
                transform: rotate(54deg);
                position: absolute;
                content: "";
                background: #034FE6;
                top: 155px;
                left: 52px;
                border-radius: 30px;
            }

            &::before {
                position: absolute;
                content: "";
                width: 270px;
                height: 178.5px;
                z-index: 1;
                background-image: url('../../assets/home_line2.png');
                background-size: 100% 100%;
                right: 0;
                bottom: 31px;
            }
        }



        .slick-arrow {
            width: 40px;
            height: 40px;
            z-index: 10;
        }

        .slick-next {
            inset-inline-end: -12px
        }

        .slick-prev {
            inset-inline-start: -12px
        }

        &_swiper {
            height: 193px;
            margin-bottom: 32px;

            &_item {
                // display: inline-flex !important;                justify-content: center;
                cursor: pointer;
                height: 190px;
                flex: 1;
                border-radius: 8px;
                background-size: cover;

                transition: all .2s ease-in-out;


                &:hover {
                    transform: scale(1.02);
                }

            }


        }

        .home_content_product_bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: .3;
            z-index: 1;
            filter: blur(200px);
        }



        &_product_item {
            position: relative;

            overflow: hidden;


            &_all {
                color: #0F294D;
                font-weight: 700;

                svg {
                    fill: #0F294D;
                }

                &:hover {
                    color: #0065FD;

                    svg {
                        fill: #0065FD;
                    }
                }
            }

            &_border {
                position: relative;
                padding-left: 14px;

                &::after {
                    position: absolute;
                    height: 28px;
                    border-left: 1px solid #eee;
                    content: "";
                    left: 0;
                    top: 12px;

                }
            }

            &_mask {
                position: absolute;
                bottom: -15px;
                filter: blur(50px);
                width: 100%;
                left: 0;
                background: #D9D9D9;
                opacity: .7;
                height: 29px;
                z-index: -2;
            }

            &_card {
                height: 100%;
                border-radius: 0px;
                border: 1px solid #EEEEEE;
                // &:hover {
                //     box-shadow: 0px 6px 14px 3px #06275C0F;


                // }

                .ant-card-body {
                    padding: 0;
                }
            }

            &_star {

                &_score {
                    border-radius: 0px 10px 0px 10px;
                    padding: 0px 4px;
                    background: @colorPrimary;
                }

                &_img {

                    .ant-rate-star {
                        color: #FF8F00;

                        &:not(:last-child) {
                            margin-inline-end: 3px;
                        }

                        svg {
                            width: 15px;
                            height: 15px;
                        }
                    }
                }
            }

            &_tag {
                padding: 0px 6px;
                border: 1px solid #EAF3FF;
                border-radius: 2px;
                color: #4b555f;
                background: #f4f9ff;

            }

            &_percent {


                &_bg {
                    /* 外部/橙色渐变 */
                    background: #FF8F00;
                    margin-left: 8px;
                    padding: 5px 12px;
                    color: #fff;

                    border-top-right-radius: 10px;
                    border-bottom-left-radius: 10px;
                }
            }

            &_title {
                padding: 10px 25px;

                border-top-left-radius: 10px;
                font-size: 16px;
                display: flex;
                align-items: center;
                color: #fff;
                border-bottom-right-radius: 10px;
            }
        }
    }

    &_bottom {
        padding: 40px 0 0 0;

        &_bg {
            background-image: url('../../assets/index_bg.png');
            background-size: cover;
            background-position: center center;
            height: 230px;
            width: 100%;

        }

        &_title {
            margin-bottom: 30px;
            font-size: 30px;
            text-align: center;
            color: #333;
        }

        &_swiper_item {
            height: 217px;
            padding: 0 10px;
            display: flex;

            &_bg {
                display: flex !important;
                align-items: center;
                justify-content: center;
                background: #FFFFFF;
                border: 1px solid #EEEEEE;
                border-radius: 6px;
                height: 100px;

                img {
                    transition: all .3s ease-in-out;
                }

                img:hover {
                    transform: scale(1.2);
                }
            }
        }

        .slick-arrow {
            top: 100%;
            width: 40px;
            height: 40px;
            left: 50%;
            transform: translateX(-50%);
        }

        .slick-next {

            left: calc(50% + 30px)
        }

        .slick-prev {
            left: calc(50% - 30px)
        }

    }
}